<template>
  <div>
    <div>
    <el-upload
      class="upload-demo"
      action="http://localhost:5000/QRcode/files"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :on-success	="handleSuccess"
      :on-error	="handleError"
      list-type="QRcode"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>
  </div>
    
    <el-table :data="tableData" style="width: 100%"  v-loading:loading border >
      <el-table-column label="图片" prop="currentUrl">
        <template slot-scope="scope" >
          <el-image 
           :src="scope.row.Url"
           ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="Id" prop="id"> </el-table-column>
      <el-table-column label="图片名" prop="pictureName"> </el-table-column>
      <el-table-column label="图片路径" prop="picturePath"> </el-table-column>
      <el-table-column label="创建时间" prop="createdTime"> </el-table-column>
      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-edit"
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            icon="el-icon-delete"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <!-- <div class="block">
      <el-pagination
        :current-page="pager.pageIndex"
        :page-size="pager.pageSize"
        layout="prev, pager, next, jumper,sizes, total"
        :total="pager.rowsTotal"
        @current-change="handlePageIndexChange"
        @size-change="handlePageSizeChange"
      > -->
    <!-- </el-pagination> -->
    <!-- </div> -->
  </div>
</template>


<script>
import { getList2 } from "../api/QRcode"
export default {
  data() {
    return { 
         fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
       
      ],
      currentUrl:'',
      tableData: [
  
      ],
      // pager: {
      //   pageIndex: 1, // 页码
      //   pageSize: 10, // 页面大小（每页项目的数量）
      //   rowsTotal: 30, // 总记录数
      // },
      formData: {
        id: 0,
        username: "",
        password: "113",
        remarks: "",
      },
      currentIndex: 0,
      dialogFormVisible: false,
    };
  },
  methods: {
     handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      console.log(fileList);
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleSuccess(response, file, fileList){
      console.log(response,file,fileList);

    },
    handleError(err, file, fileList){
      console.log(err,file,fileList);
    },

    // 拉取数据方法
    fetchData() {
      getList2()
        .then((res) => {
          this.tableData = res.data;
          console.log(this.tableData);
          this.tableData.forEach((ele => {
            ele.Url = "http://localhost:5000/" + ele.picturePath;
            this.currentUrl = ele.Url;
          }));
          
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.card-query-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.demo-form-inline {
  display: flex;
  align-items: center;
  justify-content: center;
}
.btnQuery {
  margin-left: 10px;
}
</style>